<template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.item {
  margin-top: @spacers[4];
  position: relative;
}

.details {
  flex: 1;
  margin-left: @spacers[3];
}

i {
  width: 32px;
  height: 32px;
  color: var(--color-text);
}

h3 {
  font-size: @font-sizes[xl];
  font-weight: 500;
  margin-bottom: @spacers[2];
  color: var(--color-heading);
}
</style>
